<template>
  <div class="order-wrapper">
    <van-list
      v-if="orderList.length"
      v-model="loadding"
      :finished="finished"
      finished-text="没有更多了"
      @load="$emit('next')"
    >
      <ul class="order-list">
        <li v-for="item in orderList" :key="item.order_id">
          <div
            v-for="(store, idx) in item.goods"
            :key="store.b_id"
            class="order-item"
          >
            <div class="head">
              <nuxt-link :to="store.b_id | storeUrl">
                {{ store.b_name }} <van-icon name="arrow" />
              </nuxt-link>
              <span v-if="idx === 0">
                {{ item.order_status }}
              </span>
            </div>
            <nuxt-link
              :to="{ name: 'order-id', params: { id: item.order_id } }"
            >
              <div
                class="info"
                v-for="g in store.item"
                :key="g.order_detail_id"
              >
                <img :src="g.g_src | formatSrc" :alt="g.g_name" />
                <van-row>
                  <van-row align="bottom" type="flex" justify="space-between">
                    <p class="name text-over">{{ g.g_name }}</p>
                    <p class="name text-over price">
                      <small>￥{{ g.price }}</small>
                    </p>
                  </van-row>
                  <van-row align="bottom" type="flex" justify="space-between">
                    <p class="spec text-over2">{{ g.spec_name }}</p>
                    <p class="spec">
                      <small>x{{ g.num }}</small>
                    </p>
                  </van-row>
                </van-row>
              </div>
            </nuxt-link>
          </div>
          <p class="spec right">数量：{{ item.order_num }}</p>
          <p class="sum right">总价：￥{{ item.order_price }}</p>
          <van-row type="flex" justify="end" class="btn">
            <template v-if="item.order_status === '已支付'">
              <van-button type="default" size="small" round>
                等待发货~
              </van-button>
              <van-button
                type="danger"
                plain
                round
                size="small"
                @click="refundOrder(item)"
              >
                申请退款
              </van-button>
            </template>
            <template v-else-if="item.order_status === '已发货'">
              <van-button type="default" size="small" round>
                查看物流
              </van-button>
              <van-button
                @click="signOrder(item)"
                color="#ff6034"
                plain
                round
                size="small"
              >
                确认收货
              </van-button>
            </template>
            <template v-else-if="item.order_status === '已收货'">
              <van-button
                type="info"
                plain
                size="small"
                round
                @click="
                  $router.push({
                    name: 'order-comment',
                    params: { id: item.order_id }
                  })
                "
              >
                去评价
              </van-button>
            </template>
            <template v-else-if="item.order_status === '待退款'">
              <van-button
                type="primary"
                plain
                round
                size="small"
                @click="noRefundOrder(item)"
              >
                取消退款
              </van-button>
            </template>
          </van-row>
        </li>
      </ul>
    </van-list>
    <GoodsEmpty v-else img="order" title="未查询到订单" />
    <ModalConfirm
      :title="modalTitle"
      :desc="modalDesc"
      v-model="isShowDelModal"
      @submit="checkOrder"
      @close="initData"
      :cancelText="cancelText"
      :okText="okText"
    />
  </div>
</template>
<script>
export default {
  props: {
    orderList: {
      type: Array,
      default: () => []
    },
    next: {
      type: Function,
      default: () => {
        return () => {};
      }
    },
    value: {
      type: Boolean,
      default: false
    },
    finished: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    loadding: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit("input", v);
      }
    }
  },
  data: () => ({
    currentOrder: null,
    isShowDelModal: false,
    dealOrderType: null,
    modalTitle: null,
    modalDesc: null,
    okText: null,
    cancelText: null
  }),
  methods: {
    // 签收订单 确认收货
    signOrder(order) {
      this.currentOrder = order;
      this.modalTitle = "确认收货";
      this.modalDesc = `<span class="red">此操作不可逆</span>，请确定收到货物之后再来确认收货`;
      this.okText = "确定收货";
      this.cancelText = "我再想想";
      this.dealOrderType = "sign";
      this.isShowDelModal = true;
    },
    // 提交订单
    checkOrder() {
      this.$emit("deal", {
        type: this.dealOrderType,
        order: this.currentOrder,
        cb: this.initData
      });
    },
    // 初始化 状态
    initData() {
      setTimeout(() => {
        this.currentOrder = null;
        this.dealOrderType = null;
        this.modalTitle = null;
        this.modalDesc = null;
        this.okText = null;
        this.cancelText = null;
      }, 100);
      this.isShowDelModal = false;
    },
    refundOrder(order) {
      this.currentOrder = order;
      this.modalTitle = "申请退款";
      this.modalDesc = `申请退款后需要<span class="red">同意</span>后才能完成退款，是否继续`;
      this.okText = "继续退款";
      this.cancelText = "取消";
      this.dealOrderType = "refund";
      this.isShowDelModal = true;
    },
    noRefundOrder(order) {
      this.currentOrder = order;
      this.modalTitle = "取消退款";
      this.modalDesc = `<span class="red">当前订单正在等待商家同意退款</span>，取消后不再退款，是否继续`;
      this.okText = "取消退款";
      this.cancelText = "返回";
      this.dealOrderType = "norefund";
      this.isShowDelModal = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.order-wrapper {
  ::v-deep .empty{
    height: calc(100vh - 100px);
    background: #fff;
  }
}
.order-list {
  font-size: 16px;
  margin-top: 10px;
  padding: 0 10px;
  a {
    color: #000;
  }
  li {
    background: #fff;
    margin-bottom: 8px;
    border-radius: 10px;
    padding: 10px;
  }
  .head {
    display: flex;
    font-weight: bold;
    margin-bottom: 5px;
    justify-content: space-between;

    a {
      display: flex;
      align-items: center;
    }
    span {
      font-weight: normal;
      font-size: 14px;
      color: red;
    }
  }
  .info {
    margin-top: 10px;
    width: 335px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #000;
    img {
      width: 120px;
      height: 120px;
      margin-right: 10px;
      float: left;
    }
    .name {
      font-weight: 400;
      line-height: 20px;
      width: 150px;
      &.price {
        width: auto;
      }
    }
    p {
      margin: 0;
    }
    .spec {
      margin-top: 10px;
      padding: 2px 5px;
      max-width: 160px;
      font-size: 12px;
      color: #cbcaca;
    }
  }
  .right {
    font-size: 12px;
    text-align: right;
  }
  .sum {
    font-size: 16px;
    font-weight: bold;
    margin: 0.2rem 0 0;
  }
  .order-item {
    margin-top: 15px;
    &:first-child {
      margin: 0;
    }
  }
  .btn {
    margin: 10px 0;

    ::v-deep .van-button {
      width: 85px;
      height: 26px;
      margin-left: 15px;
    }
  }
}
</style>
